﻿<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>淡入淡出</title>
		<style>
			div {
				width: 100px;
				height: 100px;
				float: left;
				margin-left: 5px;
			}
			
			.box {
				width: 425px;
				height: 105px;
				padding-top: 5px;
				border: 1px solid #ccc;
			}
			
			.red {
				background-color: red;
			}
			
			.green {
				background-color: green;
			}
			
			.yellow {
				background-color: yellow;
			}
			
			.orange {
				background-color: orange;
			}
		</style>
	</head>

	<body>
		<div class="box">
			<div class="red"></div>
			<div class="green"></div>
			<div class="yellow"></div>
			<div class="orange"></div>
		</div>
		<script src="../jquery-1.12.4.min.js"></script>
		<script>
			$('.box').find('div').fadeTo(2000,0.3);
			$('.box').find('div').mouseover(
				function() {
					$(this).fadeTo(200,1);
				}
			);
			$('.box').find('div').mouseout(
				function() {
					$(this).fadeTo(200,0.3);
				}
			);
		</script>
	</body>

</html>